<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" @input="nameChange" placeholder="收货人姓名" placeholder-class="placeholder" :value="addressData.name||''"/>
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" maxlength="11" @input="phoneChange"  placeholder="收货人手机号码" placeholder-class="placeholder" :value="addressData.phone||''"/>
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<text @tap="chooseLocation(1)" class="input">
				{{addressData.area||"选择地址"}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		<view class="row b-b"> 
			<text class="tit">详细地址</text>
			<input class="input" type="text"  @input="addressChange" placeholder="楼号、门牌" placeholder-class="placeholder" :value="addressData.address||''"/>
		</view>
		<view class="row b-b"> 
			<text class="tit">邮政编码</text>
			<input class="input" type="text"  @input="postalCodeChange" placeholder="选填" placeholder-class="placeholder" :value="addressData.postalCode||''"/>
		</view>
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.def==1" color="#ee3535" @change="switchChange" />
		</view>
		<!-- 三级联动 -->
		<view class="mpvue-picker" v-if="isShow">
		    <view :class="{'pickerMask':showPicker}"  @click="chooseLocation" catchtouchmove="true"></view>
		    <view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
		        <view class="mpvue-picker__hd" catchtouchmove="true">
		            <view class="mpvue-picker__action" @click="chooseLocation">取消</view>
		            <view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</view>
		        </view>
				<picker-view indicator-style="height: 40px;" :value="pickerValue" class="mpvue-picker-view"  @change="pickerChangeMul"  >
					<block>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">{{item.disname}}</view>
						</picker-view-column>
					   <picker-view-column>
							<view class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">{{item.disname}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">{{item.disname}}</view>
						</picker-view-column>
					</block>
				</picker-view>
			</view>
		</view>

		
		<button class="add-btn" @click="confirm">保存</button>
	</view>
</template>

<script>
	import ajax from '@/common/request.js';
	import api from '@/common/api.js';
	var that="";
	export default {
		data() {
			return {
				length:"",//当前用户有几条收货地址
				mid:"",
				manageType:"",
				showPicker:false,
				themeColor:"#ee3535",
				isShow:false,
				list:[],
				isreq:false,
				pickerValue: [0,0,0],
				pickerValueMulThreeOne:[],
				pickerValueMulThreeTwo:[],
				pickerValueMulThreeThree:[],
				addressData: {
					address: '',
					area: '',
					name: '',
					phone: '',
					postalCode: '',
					cityId:"",
					districtId:"",
					provinceId:"",
					def: 2
				}
			}
		},
		onShow(){
			that.loadData();
			that.isreq=false;
		},
		onLoad(e){
			that=this;
			that.mid='61359';
			that.length=e.length;
			let title = '新增收货地址';
			if(e.type==='edit'){
				title = '编辑收货地址'
				that.addressData = JSON.parse(e.data);
			}
			that.manageType = e.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			postalCodeChange(e){
				that.addressData.postalCode=e.detail.value;
			},
			nameChange(e){
				that.addressData.name=e.detail.value;
			},
			phoneChange(e){
				that.addressData.phone=e.detail.value;
			},
			addressChange(e){
				that.addressData.address=e.detail.value;
			},
			initCity(){
				 let pickerValueMulThreeOne = [];
				let pickerValueMulThreeTwo = [];
				let pickerValueMulThreeThree = [];
				let pickerValueArray=that.list;
				// 第一列
				for (let i = 0, length = pickerValueArray.length; i < length; i++) {
				    pickerValueMulThreeOne.push(pickerValueArray[i]);
				}
				that.pickerValue =that.pickerValue.length === 3 ?that.pickerValue : [0, 0, 0];
				let num = this.pickerValue[0];
				for (
				    let i = 0, length = pickerValueArray[num].children.length; i < length; i++
				) {
				    pickerValueMulThreeTwo.push(pickerValueArray[num].children[i]);
				}
				// 第三列
				 let numSecond = this.pickerValue[1];
				for (let i = 0, length = pickerValueArray[num].children[numSecond].children.length; i < length; i++) {
				    pickerValueMulThreeThree.push(
				        pickerValueArray[num].children[numSecond].children[i]
				    );
				}
				that.pickerValueMulThreeOne = pickerValueMulThreeOne;
				that.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
				that.pickerValueMulThreeThree = pickerValueMulThreeThree;
	
			},
			//城市三级联动
			pickerChangeMul(e){
				let pickerValueArray = that.list;
				let changeValue = e.mp.detail.value;
				let pickerValueMulThreeTwo = [];
				let pickerValueMulThreeThree = [];
				// 重新渲染第二列
				// 如果是第一列滚动
				if(!changeValue[0]){
					changeValue[0]=0
				}
				if(!changeValue[1]){
					changeValue[1]=0
				}
				if (changeValue[0] !== that.pickerValue[0]) {
				    that.pickerValueMulThreeTwo = [];
				    for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) {
				        pickerValueMulThreeTwo.push(pickerValueArray[changeValue[0]].children[i]);
				    }
				    // 重新渲染第三列
				    for (let i = 0, length = pickerValueArray[changeValue[0]].children[0].children.length; i <
				        length; i++) {
				        pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[0].children[i]);
				    }
				    changeValue[1] = 0;
				    changeValue[2] = 0;
				    that.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
				    that.pickerValueMulThreeThree = pickerValueMulThreeThree;
				} else if (changeValue[1] !== that.pickerValue[1]) {
				    // 第二列滚动
				    // 重新渲染第三列
				    that.pickerValueMulThreeThree = [];
				    pickerValueMulThreeTwo = that.pickerValueMulThreeTwo;
				    for (let i = 0, length = pickerValueArray[changeValue[0]].children[changeValue[1]].children.length; i <
				        length; i++) {
				        pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[changeValue[1]].children[
				            i]);
				    }
				    changeValue[2] = 0;
				    that.pickerValueMulThreeThree = pickerValueMulThreeThree;
				}
				that.pickerValue = changeValue;
			},
			//选择地址
			chooseLocation(type){
				//that.initCity();
				if(type){
					//#ifdef APP-PLUS
					plus.key.hideSoftKeybord()
					//#endif
				}
				that.isShow=!that.isShow;
				that.showPicker=!that.showPicker;
			},
			pickerConfirm(){
				var index=that.pickerValue;
				that.isShow=!that.isShow;
				that.showPicker=!that.showPicker;
				that.addressData.area=that.list[index[0]].disname+that.list[index[0]].children[index[1]].disname+that.list[index[0]].children[index[1]].children[index[2]].disname;
			},
			
			//是否默认
			switchChange(e){
				that.addressData.default = e.detail;
			},
			//加载数据
			loadData(){
				var list=[];
				ajax({
					url:"/commonAddressProvince/selectProvinces",
					method:"GET",
					success(d){
						var data=JSON.parse(d);
			
						for(let i in data){
							var arr=i.split("-");
							var obj={
								code:arr[1],
								disname:arr[0],
								children:[]
							};
							for(let j in data[i]){
								var arr=j.split("-");
								obj.children.push({
									code:arr[1],
									disname:arr[0],
									children:data[i][j]
								});
							}
							list.push(obj)
						}
						that.list=list;
						if(that.manageType=="edit"){
							//编辑地址省市初始化
							var arr=that.addressData.area.split(" ");
							that.list.forEach((item,index)=>{
								if(item.disname==arr[0]){
									that.pickerValue[0]=index;
									item.children.forEach((city,i)=>{
										if(city.disname==arr[1]){
											that.pickerValue[1]=i;
											city.children.forEach((area,j)=>{
												if(area.disname==arr[2]){
													that.pickerValue[2]=j;
												}
											})
										}
									})
								}
							})
						}
						that.initCity();
					}
				})
			},
			
			//提交
			confirm(){
				if(that.isreq){
					return
				}
				that.isreq=true
				let data = that.addressData;
				if(!data.name){
					api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(data.phone)){
					api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.address){
					api.msg('请输入正确的位置');
					return;
				}
				if(!data.area){
					api.msg('请选择详细地址');
					return;
				}
				var def=data.default||"";
				var url="/user/address/addAddress";
				if(def.value){
					def=1
				}else{
					def=2
				}
				if(that.manageType=="edit"){
					url="/user/address/updateAddress"
				}else{
					if(that.length=0){
						def=1
					}
				}
				
				var d={
					addressId:data.addressId||"",
					address:data.address,
					area:data.area,
					cityId:that.list[that.pickerValue[0]].children[that.pickerValue[1]].code,
					def:def,
					districtId:that.list[that.pickerValue[0]].children[that.pickerValue[1]].children[that.pickerValue[2]].code,
					phone:data.phone,
					postalCode:data.postalCode||"",
					name:data.name,
					mid:that.mid,
					provinceId:that.list[that.pickerValue[0]].code,
				}
				
				ajax({
					url:url,
					data:d,
					success(d){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						}, 800)
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16rpx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30rpx;
		height: 110rpx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 160rpx;
			font-size: 28rpx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16rpx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
		width:525rpx;
		text-align: center;
		height:72rpx;
		margin-top: 60rpx;
		line-height: 72rpx;
		color:#fff;
		font-size: 28rpx;
		background:linear-gradient(90deg,rgba(252,165,52,1),rgba(238,53,53,1));
		border-radius:20rpx;
	}
	.pickerMask {
	    position: fixed;
	    z-index: 1000;
	    top: 0;
	    right: 0;
	    left: 0;
	    bottom: 0;
	    background: rgba(0, 0, 0, 0.6);
	}
	
	.mpvue-picker-content {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    transition: all 0.3s ease;
	    transform: translateY(100%);
	    z-index: 3000;
	}
	
	.mpvue-picker-view-show {
	    transform: translateY(0);
	}
	
	.mpvue-picker__hd {
	    display: flex;
	    padding: 9px 15px;
	    background-color: #fff;
	    position: relative;
	    text-align: center;
	    font-size: 17px;
	}
	
	.mpvue-picker__hd:after {
	    content: ' ';
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-bottom: 1px solid #e5e5e5;
	    color: #e5e5e5;
	    transform-origin: 0 100%;
	    transform: scaleY(0.5);
	}
	
	.mpvue-picker__action {
	    display: block;
	    flex: 1;
	    color: #1aad19;
	}
	
	.mpvue-picker__action:first-child {
	    text-align: left;
	    color: #888;
	}
	
	.mpvue-picker__action:last-child {
	    text-align: right;
	}
	
	.picker-item {
	    text-align: center;
	    line-height: 40px;
	    font-size: 16px;
	}
	
	.mpvue-picker-view {
	    position: relative;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 400rpx;
	    background-color: rgba(255, 255, 255, 1);
	}

</style>
